
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>
<head>
  <%@ include file="../include_base.jsp"%>
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../../styles/css/modern-business.css" rel="stylesheet" type="text/css">
    <title>ProMatch</title>
</head>
<body>
<%--导航--%>
<div class="navbar yamm navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">ProMatch</a>
    </div>
    <div id="navbar-collapse-1" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <!-- Classic list -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">项目<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <!-- Content container to add padding -->
              <div class="yamm-content">
                <div class="row">
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Section Title</strong></p>
                    </li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Links Title</strong></p>
                    </li>
                    <li><a href="#"> Link Item </a></li>
                    <li><a href="#"> Link Item </a></li>
                    <li><a href="#"> Link Item </a></li>
                    <li><a href="#"> Link Item </a></li>
                    <li><a href="#"> Link Item </a></li>
                    <li><a href="#"> Link Item </a></li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Section Title</strong></p>
                    </li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                  </ul>
                  <ul class="col-sm-2 list-unstyled">
                    <li>
                      <p><strong>Section Title</strong></p>
                    </li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>
                      <ul>
                        <li><a href="#"> Link Item </a></li>
                        <li><a href="#"> Link Item </a></li>
                        <li><a href="#"> Link Item </a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <!-- Accordion demo -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">标签<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <div class="yamm-content">
                <div class="row">
                  <div id="accordion" class="panel-group">
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a></h4>
                      </div>
                      <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">Ut consectetur ullamcorper purus a rutrum. Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna. </div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a></h4>
                      </div>
                      <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">Nullam pretium fermentum sapien ut convallis. Suspendisse vehicula, magna non tristique tincidunt, massa nisi luctus tellus, vel laoreet sem lectus ut nibh. </div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading">
                        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a></h4>
                      </div>
                      <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">Praesent leo quam, faucibus at facilisis id, rhoncus sit amet metus. Sed vitae ipsum non nibh mattis congue eget id augue. </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <!-- Classic dropdown -->
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">标签<b class="caret"></b></a>
          <ul role="menu" class="dropdown-menu">
            <li><a tabindex="-1" href="#"> Action </a></li>
            <li><a tabindex="-1" href="#"> Another action </a></li>
            <li><a tabindex="-1" href="#"> Something else here </a></li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#"> Separated link </a></li>
          </ul>
        </li>
      </ul>
      <form action="<c:url value="/login"/>" method="post">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <button value="login" type="submit" class="btn btn-success navbar-btn">登陆</button>

            <%--<button value="register" type="submit" class="btn btn-primary navbar-btn">注册</button>--%>
          </li>
        </ul>
      </form>
    </div>
  </div>
</div>
<header style="height: 400px" id="myCarousel" class="carousel slide">
  <ol style="height: 1%" class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div style="height: 400px" class="carousel-inner">
    <div class="item active">
      <div class="fill" style="background-image: url('/styles/images/slideimage1.jpg');"></div>
      <div class="carousel-caption">
        <h2>Caption 1</h2>
      </div>
    </div>
    <div class="item">
      <div class="fill" style="background-image: url('/styles/images/slideimage2.jpg');"></div>
      <div class="carousel-caption">
        <h2>Caption 2</h2>
      </div>
    </div>
    <div class="item">
      <div class="fill" style="background-image: url('/styles/images/slideimage3.jpg');"></div>
      <div class="carousel-caption">
        <h2>Caption 3</h2>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a style="height: 400px" class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a style="height: 400px" class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>
</header>
<div class="container">
  <div class="row">

  <div class="col-lg-12">
    <h2 class="page-header">什么是ProMatch</h2>
  </div>
  <div class="col-md-4">
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-tree fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service One</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-car fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Two</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-support fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Three</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-database fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Four</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-bomb fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Five</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-bank fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Six</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-paper-plane fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Seven</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-space-shuttle fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Eight</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
    <div class="media">
      <div class="pull-left">
                        <span class="fa-stack fa-2x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-recycle fa-stack-1x fa-inverse"></i>
                        </span>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Service Nine</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit harum.</p>
      </div>
    </div>
  </div>

</div>
  <hr>
  <div class="row" align="center">
    <div class="col-md-3">
      <h3>联系我们</h3>
      <br>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <%--<p><i class="fa fa-phone"></i>--%>
        <%--<abbr title="Phone">P</abbr>: (123) 456-7890</p>--%>
      <%--<p><i class="fa fa-envelope-o"></i>--%>
        <%--<abbr title="Email">E</abbr>: <a href="mailto:name@example.com">name@example.com</a>--%>
      <%--</p>--%>
      <%--<p><i class="fa fa-clock-o"></i>--%>
        <%--<abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM</p>--%>
      <%--<ul class="list-unstyled list-inline list-social-icons">--%>
        <%--<li>--%>
          <%--<a href="#"><i class="fa fa-qq fa-2x"></i></a>--%>
        <%--</li>--%>
        <%--<li>--%>
          <%--<a href="#"><i class="fa fa-wechat fa-2x"></i></a>--%>
        <%--</li>--%>
        <%--<li>--%>
          <%--<a href="#"><i class="fa fa-weibo fa-2x"></i></a>--%>
        <%--</li>--%>
        <%--<li>--%>
          <%--<a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a>--%>
        <%--</li>--%>
      <%--</ul>--%>
    </div>
    <div class="col-md-3">
      <h3>关于ProMatch</h3>
      <br>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
    </div>
    <div class="col-md-3">
      <h3>新闻中心</h3>
      <br>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
    </div>
    <div class="col-md-3">
      <h3>社区</h3>
      <br>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
      <p>示例标签</p>
    </div>
  </div>
  <%--footer--%>
  <hr>
  <footer>
    <div class="row">
      <div class="col-lg-6" align="center">
        <p>
          广东省广州市天河区五山路381号 华南理工大学
        </p>
      </div>
      <div class="col-lg-6" align="center">
        <p>Copyright © ProMatch 2015版权所有<a href="#">隐私条款</a></p>
      </div>
    </div>
  </footer>
</div>

<script>
  $('.carousel').carousel({
    interval:5000
  })
</script>
</body>
</html>
